<template>
  <div class="work-order-list">
    <CommonHeader :title="title" :is-show-back="true" class="header-top" />
    <div class="search-box">
      <div class="search-box-left" @click="searchFlag = true">
        <span class="left-text">筛选</span>
        <van-icon name="filter-o" size="16px"/>
      </div>
      <div class="search-box-center">
        <el-input v-model="formData.saleOrderNumber" autosize placeholder="请输入单号" size="small" clearable @clear="searchEvent"></el-input>
      </div>
      <div class="search-box-right">
        <el-button type="primary" size="small" @click="searchEvent">搜索</el-button>
      </div>
      <div class="inner">
        <div v-show="searchFlag" class="searchInfo">
          <van-form v-model="formData" class="vantForm">
            <van-cell-group inset>
              <div class="selTest">
                <label class="labelLeft">单号</label>
                <el-input
                  v-model="formData.saleOrderNumber"
                  clearable
                  placeholder="请输入"
                />
              </div>
              <div class="selTest">
                <label class="labelLeft">快捷码</label>
                <el-input
                  v-model="formData.customFieldOne"
                  clearable
                  placeholder="请输入"
                />
              </div>
            </van-cell-group>
            <div class="btnOk">
              <van-button round block reset @click="cancel"> 重置 </van-button>
              <van-button round block type="primary" @click="onSubmit">
                确定
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <CommonMain>
      <template>
        <van-pull-refresh v-model="formData.vanPullRefreshing" @refresh="vanPullOnRefresh">
          <van-list v-if="contentList.length > 0" v-model="formData.vanListLoading" :finished="formData.vanListFinished" finished-text="没有更多了" @load="vanListOnLoad" :immediate-check="false">
            <listItem v-for="(item, index) in contentList" :key="index" :item-obj="item" :type="type" @confirm="saleOrderConfirm"></listItem>
          </van-list>
          <div v-if="!formData.vanListLoading && contentList.length == 0 && !formData.vanPullRefreshing" class="no-data">暂无数据</div>
        </van-pull-refresh>
      </template>
    </CommonMain>
  </div>
</template>

<script>
import listItem from './components/listItem.vue'
import CommonHeader from '@/components/CommonHeader/index.vue'
import CommonMain from '@/components/CommonMain/index.vue'
import SearchForm from './components/SearchForm.vue'
import { reqPurchaseReceiptsList, reqProductOrderList } from "@/api/cjSaleOutReceipt.js";
import { mapMutations } from 'vuex';
export default {
  components: {
    CommonHeader,
    CommonMain,
    listItem
  },
  data () {
    return {
      formData:{
        page:1,
        size:10,
        saleOrderNumber:"",
        vanListLoading:false,
        vanListFinished:false,
        vanPullRefreshing:false
      },
      contentList:[],
      type:"salesOrder",
      saleOutNo: '',
      searchFlag: false
    }
  },
  mounted(){
    this.type = this.$route.query.type;
    this.saleOutNo = this.$route.query?.saleOutNo || '';
    this.vanPullOnRefresh();
    // 扫码枪扫码
    const scanning_gun_enable = process.env.VUE_APP_BAR_CODE_SCANNING_GUN === 'true';
    if(scanning_gun_enable){
      window["ScanCodeMsg"] = (res) => {
        if (res) {
          console.log(res, "ScanCodeMsg这是首页");
          this.formData.orderNumber = res;
          this.onRefresh("search");
        }
      };
    }
  },
  computed: {
    title(){
      return this.type === "salesOrder" ? "销售订单选择" : "生产订单选择"
    }
  },
  methods: {
    ...mapMutations('cj_mh',['SET_RELATE_ORDERS']),
    //获取销售订单列表信息
    getPurchaseReceiptsList(){
       return new Promise((resolve,reject) => {
          const { page,size,saleOrderNumber , customFieldOne} = this.formData;
          reqPurchaseReceiptsList({page,size,saleOrderNumber, customFieldOne}).then(response => {
            if(response.code === 200 && response.data.content){
              const list = response.data.content.map(item => {
                const materials = item?.extendMap?.materials || [];
                console.log(materials)
                const materialNames = materials.map(mater => mater.name).join(",");
                const materialCodes = materials.map(mater => mater.code).join(",");
                return {
                  ...item,
                  materialNames,
                  materialCodes,
                  materialList: materials
                }
              })
              if(this.formData.page > 1){
                this.contentList = this.contentList.concat(list);
              } else {
                this.contentList = list;
              }
              const { totalElements,totalPages } = response.data;
              if(totalElements < this.contentList.length || response.data.content === 0 || response.data.content.length < this.formData.size){
                this.formData.vanListFinished = true;
              }
            }
            console.log('分页获取销售订单列表',response);
            resolve();
          },error => {
              console.log('分页获取销售订单列表',error);
              reject();
          })
       })
    },
    async vanListOnLoad(){
      console.log("执行下拉刷新",this.formData);
      this.formData.page += 1;
      if(this.type === "salesOrder"){
        await this.getPurchaseReceiptsList();
        this.formData.vanListLoading = false;
      } else {
        this.formData.vanListLoading = false;
      }
    },
    //下拉刷新
    async vanPullOnRefresh(){
      this.formData.vanPullRefreshing = true;
      this.formData.page = 1;
      this.formData.size = 10;
      this.contentList = [];
      if(this.type === "salesOrder"){
        await this.getPurchaseReceiptsList();
      } else {
      }
      this.formData.vanPullRefreshing = false;
    },
    saleOrderConfirm(orderInfo){
      this.SET_RELATE_ORDERS(orderInfo.saleOrderNumber || orderInfo.productOrderNumber);
      if(this.saleOutNo) {
        this.$router.push({name:"SaleOutReceiptDetail",params:{saleOrderNumber:orderInfo.saleOrderNumber || orderInfo.productOrderNumber}, query:{saleOutNo:this.saleOutNo, status: 0}});
      } else {
        this.$router.push({name:"SaleOutReceiptAdd",params:{saleOrderNumber:orderInfo.saleOrderNumber || orderInfo.productOrderNumber}});
      }
    },
    //点击扫码
    async scanCodeEvent(){
      try {
        const res = await window.flutter_inappwebview.callHandler('qrCode');
        this.formData.orderNumber = res;
        this.onRefresh("search");
        console.log('调用精致提供的扫码api',res);
      } catch (error) {
        Toast({message: error.message,position: 'top'});
        console.log("调用精致提供的扫码api",error);
      }
    },
    searchEvent(){
      this.formData.page = 1
      const code = this.formData.saleOrderNumber;
      // if(!code){
      //   return;
      // }
      if(this.type === "salesOrder"){
        this.getPurchaseReceiptsList();
      } else {
      }
    },
    onSubmit() {
      this.formData.page = 1
      this.searchFlag = false;
      this.vanPullOnRefresh();
    },
    cancel() {
      this.formData.page = 1
      this.formData.size = 10
      this.formData.customFieldOne = ''
      this.formData.saleOrderNumber = ''
      this.searchFlag = false
      this.formData.vanListFinished = false
      this.vanPullOnRefresh();
    },
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/css/common.scss';
.work-order-list {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .search-box {
    width:100%;
    height: 46px;
    padding: 10px 10px;
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    .search-box-left{
      width: 60px;
      margin-right: 10px;
      display: flex;
      font-size: 12px;
    }
    .search-box-center{
      width: 100%;
      margin-right: 10px;
    }
  }
  .van-pull-refresh {
    height: 100%;
    overflow: scroll;
    /deep/ .van-pull-refresh__track {
      // overflow: scroll;
    }
    .van-list {
      height: 100%;
      // overflow: scroll;
    }
    .no-data {
      height: 100%;
      font-size: 14px;
      display: flex;
      justify-content: center;
      color: #c7c6c6;
      padding-top: 30px;
    }
  }
}
.sure-dialog{
  border-radius: 4px;
}
.model-content{
  padding: 25px 10px 20px 26px;
  .name{
    font-size: 14px;
    color: #666666;
  }
  .value{
    font-size: 16px;
    color: #548AF1;
    margin-top: 10px;
  }
}
.shaixuan{
      width: 80px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 4px;
      color: #646566;
      font-size: 14px;
      line-height: 20px;
      cursor: pointer;
      background: #fff;
}
.searchInfo {
  position: absolute;
  top: calc(46px + 4px);
  left: 0;
  z-index: 33;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  .vantForm {
    // padding: 0 15px;
    font-size: 13px;

    ::v-deep .van-field {
      line-height: 14px;
    }
    ::v-deep .van-field__label {
      color: #333333;
    }

    ::v-deep .van-button--primary {
      background: #007cff;
      border: 1px solid #007cff;
    }

    ::v-deep .van-field__control {
      text-align: right;
    }

    ::v-deep .van-button--block {
      height: 30px;
      font-size: 13px;
    }
    .btnOk {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      height: 30px;

      ::v-deep .van-button--round {
        width: 118px;
        border-radius: 4px;
      }

      ::v-deep .van-button--default {
        margin-right: 10px;
        border-color: #c9c9c9;
      }
    }
    .selTest {
      display: flex;
      justify-content: space-between;
      height: 36px;
      box-sizing: border-box;
      border-bottom: 1px solid #f6f6f6;

      label {
        display: inline-block;
        width: 150px;
        text-align: center;
        font-size: 14px;
        line-height: 36px;
        color: #323232;
      }

      .labelLeft {
        text-align: left;
        padding-left: 16px;
      }

      .el-input {
        flex: 1 0 auto;
        width: 0;
      }

      ::v-deep .el-input__inner {
        height: 36px;
        line-height: 36px;
        border: none;
        border-bottom: 1px solid #f6f6f6;
        text-align: right;
      }
      ::v-deep .el-input__inner::placeholder {
        text-align: right;
      }

      ::v-deep .el-select .el-input__inner {
        text-align: right;
      }

      ::v-deep .el-select__input {
        text-align: right;
      }
    }
  }
}
</style>
